<template>
    <div id="centreLeft1">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span style="color:#5cd9e8">
          <icon name="chart-pie"></icon>
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2">专业问题数量占比</span>
          <dv-decoration-1 style="width:1.25rem;height:.25rem; position:relative;top:-.0375rem;" />
        </div>
      </div>
      <div class="d-flex jc-center">
        <pratePie id="pratePie" height="200px" width="200px" :option="pratePieOption" style="margin:30px;"/> 
      </div>
    </div>
  </div>   
</template>

<script>
 import pratePie from '@/components/echart/pratePie'

 
 
 export default {
    data() {
      return {
        tabPosition: 'left',
        pratePieOption:null
      };
    },
    name: 'ProblemModule',
    components: { pratePie },
    created() {
      this.getpratePieOption()
    },
    methods: {
      getpratePieOption(){
        //从后台获取数据
        this.pratePieOption={
          tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          grid: {
              left: '3%',
              top: '1%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          series: [
              {
                  name: '问题占比',
                  type: 'pie',
                  radius: '55%',
                  center: ['50%', '60%'],
                  data: [
                      {value: 4.46, name: '机电'},
                      {value: 10.91, name: '信号'},
                      {value: 10.91, name: '车辆'},
                      {value: 10.91, name: '站务'},
                      {value: 10.91, name: '调度'},
                      {value: 10.91, name: '委外'},
                      {value: 4.63, name: '通信'}
                  ],
                  emphasis: {
                      itemStyle: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                  }
              }
          ]
        }
      }
    }
  };
</script>
<style scoped>
.chart-container{
  position: relative;
  width: 100%;
  height: 100%;
}
#centreLeft1 {
  padding: 0.2rem;
  height: 5.125rem;
  min-width: 3.75rem;
  border-radius: 0.0625rem;
  .bg-color-black {
    height: 4.8125rem;
    border-radius: 0.125rem;
  }
  .text {
    color: #c3cbde;
  }
  .chart-box {
    margin-top: 0.2rem;
    width: 2.125rem;
    height: 2.125rem;
    .active-ring-name {
      padding-top: 0.125rem;
    }
  }
}
</style>